<template>
    <div class="storey">
        <ul>
            <div v-if="storeys&&storeys.length>0">
                <li class="storey-item" v-for="storey in storeys" :key="storey.id">
                    <simple-user-info-left class="simple-user-info" :userInfo="storey.answerer"></simple-user-info-left>
                    <div class="content">
                        <span>{{storey.content}}</span>
                        <br>
                        <span style="float: right">{{convertTime(storey.replyTime)}}</span>
                    </div>
                </li>
                <li class="under-operate">
                    <a @click="listStorey" class="view-all">查看全部</a>
                    <el-button size="mini" style="float: right" @click="reply=!reply">我也说一句</el-button>
                </li>
            </div>
            <transition enter-active-class="bounceInRight" leave-active-class="bounceOutRight"
                        :duration="{enter:500,leave:500}">
                <li v-if="reply||!storeys||storeys.length===0" class="reply-storey animated">
                    <el-input placeholder="请输入内容" v-model="content">
                        <el-button slot="append" @click="replyStorey">回复</el-button>
                    </el-input>
                </li>
            </transition>
        </ul>
    </div>
</template>

<script>
    import SimpleUserInfoLeft from '@/components/user/SimpleUserInfoLeft'
    import { convertTime } from '@/utils/date'

    export default {
        name: 'storey',
        components: {
            SimpleUserInfoLeft
        },
        props: ['replyId', 'storeys'],
        data () {
            return {
                reply: false,
                content: ''
            }
        },
        methods: {
            convertTime (date) {
                return convertTime(date)
            },
            listStorey () {
                this.$emit('listStorey')
            },
            replyStorey () {
                this.$emit('replyStorey', this.content)
                this.content = ''
            }
        }
    }
</script>

<style lang="scss" scoped>
    .storey {
        background: rgba(213, 217, 220, 0.5);

        ul, li {
            list-style: none;
            padding: 0;
            margin: 0;

            .storey-item {
                width: 100%;
                height: 80px;
                display: -webkit-inline-flex;

                .simple-user-info {
                    width: 30%;
                }

                .content {
                    width: 70%;
                    font-size: 14px;
                    text-align: left;
                    padding: 8px;
                }
            }

            .under-operate {
                height: 32px;
                padding: 2px 16px;

                .view-all {
                    float: left;
                    font-size: 14px;
                    line-height: 32px;
                    margin: 0 0 0 auto;
                }

                a {
                    text-decoration: none;
                    cursor: pointer;
                }

                a:link {
                    color: #216278;
                }

                a:visited {
                    color: #216278;
                }

                a:hover {
                    color: rgba(255, 151, 60, 0.8);
                }

                a:active {
                    color: rgba(255, 86, 25, 0.8);
                }
            }

            .reply-storey {
                padding: 3px;
            }
        }
    }
</style>
